<template>
    <div class="bg" style="height:calc(100vh - 60px)">
        <XHeader
            :left-options="{backText:''}"
            style="background-color: #55BEC1;"
            class="tabbar"
         >免费频道
           <router-link to="/" class="fa fa-home ri" sort="right"></router-link>
        </XHeader>
        <p style="margin:47px 0 0 0"></p>
        <div class="week-main">
            <p class="week-title">限时免费</p>
            <div class="novel">
                <router-link :to="'/novel/'+firstNavel._id" style="width: 100%;display: flex;">
                    <div><img :src="'/api/images/books/'+firstNavel.avatar"></div>
                    <div>
                        <p class="novel-p">{{firstNavel.name}}</p>
                        <span class="novel-s">{{firstNavel.introduction}}</span>
                        <p class="last-time">剩余时间：<span style="color:#77CBCD">14小时</span></p>
                    </div>
                </router-link>
            </div>
            <router-link :to="'/novel/'+secondNavel._id">
                <p style="margin:0;position:relative;text-align:left"><span class="second-state">{{secondNavel.category}}</span><span class="second-name">{{secondNavel.name}}</span><span class="second-time">14小时</span></p>
            </router-link>
        </div>
        <div class="gen">
            <p class="gen-title">免费书籍</p>
            <div v-for="(f,i) in freeNavel" :key="i" :class="{one:i==0,two:i==1}">
                <router-link :to="'/novel/'+f._id">
                    <p class="list"><span class="second-state" style="top:12px">{{f.category}}</span><span class="second-name" style="color:#555;font-weight:500;">{{f.name}}</span><span class="second-time">11-07</span></p>
                </router-link>
            </div>
        </div>

        <div style="height:60px;background-color:#55BEC1;line-height:60px;font-size:15px;position:fixed;bottom:0;width:100%">
            <span style="color:white">联系在线客服请关注公众号：</span>
            <span style="color:red">书海小说网</span>
        </div>
    </div>
</template>

<script>
    import { XHeader } from 'vux'
    export default{
        components:{
            XHeader
        },
        data:function(){
            return {
                freeNavel:[],
                firstNavel:{},
                secondNavel:{}
            }
        },
        mounted:function(){
            this.http.get("/api/free").then(res=>{
                if(!res.data.err){
                    this.freeNavel = res.data.data;
                    this.firstNavel = res.data.data[0];
                    this.secondNavel = res.data.data[1]
                }
            })
        }
    }
</script>

<style scoped>
    .tabbar{
        position: fixed;
        top: 0;
        z-index: 5;
        width: 100%;
    }
    .ri{
        position: absolute;
        right: 8px;
        font-size: 30px;
        top: 8px;
        color: white;
    }
    .week-main{
        background-color: white;
        position: relative;
        padding: 15px;
        margin-top: 20px;
    }
    .week-title{
        text-align: left;
        font-size: 20px;
        margin: 0;
        font-weight: bold;
    }
    .week-title::before{
        width: 5px;
        height: 20px;
        display: inline-block;
        position: relative;
        top: 3px;
        left: -15px;
        background-color: #55BEC1;
        content: "";
    }
    .changed{
        margin-left: 20px;
        position: absolute;
        right: 8px;
        top: 23px;
    }
    .change-rec{
        width:24px;
        height: 10px;
        border-left: solid 1px #6ec4d8;
        border-right: solid 1px #6ec4d8;
    }
    .change-tri-top{
        position: absolute;
        width: 17.14px;
        height: 17.14px;
        top: -9px;
        left: 3px;
        transform: rotate(45deg); 
        border-left: solid 1px #6ec4d8;
        border-top: solid 1px #6ec4d8;
    }
    .change-tri-bottom{
        position: absolute;
        width: 17.14px;
        height: 17.14px;
        top: 1px;
        left: 3px;
        transform: rotate(45deg); 
        border-right: solid 1px #6ec4d8;
        border-bottom: solid 1px #6ec4d8;
    }
    .change-text{
        position: absolute;
        left: 3px;
        top: -6px;
        color: #6ec4d8;
    }
    .novel{
        display: flex;
        margin: 10px 0 25px 0;
        height: 110px;
        overflow: hidden;
        text-align: left;
    }
    .novel img{
        width:80px;
        margin-right: 10px;
    }
    .novel-p{
        margin: 0 0 10px 0;
        font-size: 20px;
        width: 90%;
        overflow: hidden;
        color: #333;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .novel-s{
        display: inline-block;
        color: #666;
        font-size: 14px;
        line-height: 17px;
        height: 51px;
        overflow: hidden;
    }
    .last-time{
        color: #666;
        margin: 0;
        font-size: 12px;
    }
    .second-state{
        position: absolute;
        left: 0;
        padding: 0 10px;
        border-radius: 11px;
        line-height: 22px;
        font-size: 13px;
        text-align: left;
        color: white;
        background-color: #B0CAE9;
    }
    .second-name{
        display: inline-block;
        color: #333;
        font-weight: bold;
        margin-left: 52px;
        margin-right: 50px;
        text-align: left;
        overflow: hidden;
        width: calc(100% - 120px);
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .second-time{
        color: #999;
        position: absolute;
        right: 10px;
        font-size: 13px;
    }
    .gen{
        padding: 16px;
        text-align: left;
        background-color: white;
        margin-top: 20px;
    }
    .gen-title{
        margin: 0 0 10px 0;
        font-weight: bold;
        font-size: 18px;
    }
    .gen-title::before{
        content: "";
        position: relative;
        display: inline-block;
        width: 5px;
        left: -15px;
        top: 3px;;
        background-color:#55BEC1; 
        height: 20px;
    }
    .list{
        margin:0;
        position:relative;
        text-align:left;
        border-bottom: solid 1px #ccc;
        height: 50px;
        line-height: 50px;
    }
    .one,.two{
        display: none;
    }
</style>